
<section id="widget-grid" class="">
	<!-- row -->
	<div class="row" id="allTaskBox">
		<!-- NEW WIDGET START -->
			<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<!-- Widget ID (each widget will need unique ID)-->
				<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-sortable="true" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false">
					<header>
						<span class="widget-icon"> <i class="fa fa-table"></i> </span>
						<h2> 车辆准点率统计 </h2>
					</header>
					<!-- widget div-->
					<div role="content">
						<!-- widget edit box -->
						<div class="jarviswidget-editbox">
							<!-- This area used as dropdown edit box -->
						</div>
						<!-- end widget edit box -->
						<!-- widget content -->
						<div class="widget-body no-padding">
							
							<!-- 自定义搜索区 -->
							<div class="widget-body-toolbar" style="height:70px;overflow:hidden;">
								<form role="form" class="smart-form">
									<div class="pull-left global-search-box">
										<section class="pull-left no-padding pull-width180" >
											<label class="">发运时间</label>
											<label class="input">
												<i class="icon-prepend fa fa-calendar"></i>
												<input name="in_date" class="input-sm" type="text" id="reservationT" value="14-06-01 - 14-06-30" maxlength="10">
											</label>
										</section>
                                        <section class="pull-left no-padding pull-width160 pull-padding-right50">
											<label class="">车牌号</label>
											<label class="input multiselect-bg">
												<input type="text" class="input-sm" style="width:100%"  name="tid" placeholder="aaa" value=""  id="e6">
												<div class="multiselect-box" id="moreResult">已选择20辆车<a href="javascript:void(0);" class="select2-search-choice-close" id="clearMoreRe"></a></div>
											</label>
											<label  style="position:absolute;right:0; bottom:0;"><a href="javascript:void(0);" class="btn btn-default btn-sm" onclick="selectMoreT();">多选</a></label>

										</section>
										<div class="global-search-btn" >
											<a class="btn btn-primary  btn-sm" type="button"><i class="fa fa-search fa-fw"></i>查询</a>
											<!-- <a id="more_search" class="btn btn-sm btn-link" type="button">更多条件</a> -->
								  		</div>
									</div>
									
								</form>
							</div>
							
						  <div class="row no-margin margin-top-10 margin-bottom-10" >
								<div class="col-xs-12 col-sm-12">
									<div class="btn-group">
										<a href="#" class="btn btn-default" type="button" id="daochu">导出</a>
									</div>
								</div>
							</div>
							<table id="dt_basic" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th>车牌号</th>
										<th>应发车次</th>
										<th>实发车次</th>
										<th>发车率</th>
										<th>准发次数</th>
										<th>晚发次数</th>
										<th>发车准点率</th>
										<th>准达次数</th>
										<th>晚到次数</th>
										<th>到达准点率</th>
										<th>运行准时次数</th>
										<th>运行延误次数</th>
										<th>运行准时率</th>
									</tr>
								</thead>
								<tbody>
	                            	<tr>
										<td>京H12345</td>
										<td><a href="#">64</a></td>
										<td><a href="#">60</a></td>
										<td>
											<div class="progress progress-sm no-margin pull-width120">
												<div class="progress-bar bg-color-green" style="line-height:12px" aria-valuetransitiongoal="93.8">93.8%</div>
											</div>
										</td>
										<td><a href="#">50</a></td>
										<td><a href="#">10</a></td>
										<td>
											<div class="progress progress-sm no-margin pull-width120">
												<div class="progress-bar bg-color-green" style="line-height:12px" aria-valuetransitiongoal="80">80%</div>
											</div>
										</td>
										<td><a href="#">40</a></td>
										<td><a href="#">20</a></td>
										<td>
											<div class="progress progress-sm no-margin pull-width120">
												<div class="progress-bar bg-color-green" style="line-height:12px" aria-valuetransitiongoal="66.6">66.6%</div>
											</div>
										</td>
										<td><a href="#">40</a></td>
										<td><a href="#">20</a></td>
										<td>
											<div class="progress progress-sm no-margin pull-width120">
												<div class="progress-bar bg-color-green" style="line-height:12px" aria-valuetransitiongoal="66.6">66.6%</div>
											</div>
										</td>
									</tr>
									                         	
								</tbody>
							</table>
						</div>
						<!-- end widget content -->

					</div>
					<!-- end widget div -->

				</div>
				<!-- end widget -->
			</article>
			
			
		<!-- WIDGET END -->

	</div>

	<!-- end row -->

	<!-- end row -->

</section>
<div class="modal fade" id="moreTrucks"  role="dialog" aria-labelledby="aaa" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="">车辆多选</h4>
			</div>
			<div class="modal-body">
				<form class="smart-form" action="">
					<fieldset class="no-padding">
					<section >
						<div class="row">
							<label class="col col-3 text-align-right">选择车辆：</label>
							<label class="col-xs-8 ">
								<input type="text" class="input-sm" style="width:100%"  name="moretrucks" placeholder="aaa" value=""  id="e7">
							</label>
						</div>
					</section>
					</fieldset>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="sure">
					<i class="fa fa-save"></i>
					确认
				</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">
					取消
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="well">
注明：1、所有统计只包含已结束的发车计划；当前未结束的发车计划不在统计范围；2、默认统计时间为本月（到当前时间）<br/><br/>
发车率=实发车次/应发车次*100%<br/>
发车准点率=准发次数/实发次数*100%<br/>
到达准点率=准达次数/实发次数*100%<br/>
运行准时率=运行准时次数/实发次数*100%

</div>


<script src="js/plugin/date/moment.js"></script>
<script src="js/plugin/date/daterangepicker.js"></script>

<script type="text/javascript">

	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();


	// load bootstrap-progress bar script
	loadScript("js/plugin/bootstrap-progressbar/bootstrap-progressbar.js", progressBarAnimate);

	// Fill all progress bars with animation
	function progressBarAnimate() {
		$('.progress-bar').progressbar({
			display_text : 'fill'
		});
	}

	// PAGE RELATED SCRIPTS

	loadDataTableScripts();
	function loadDataTableScripts() {

		loadScript("js/plugin/datatables/jquery.dataTables-cust.min.js", dt_2);

		function dt_2() {
			loadScript("js/plugin/datatables/ColReorder.min.js", dt_3);
		}

		function dt_3() {
			loadScript("js/plugin/datatables/FixedColumns.min.js", dt_4);
		}

		function dt_4() {
			loadScript("js/plugin/datatables/ColVis.min.js", dt_5);
		}

		function dt_5() {
			loadScript("js/plugin/datatables/ZeroClipboard.js", dt_6);
		}

		function dt_6() {
			loadScript("js/plugin/datatables/media/js/TableTools.min.js", dt_7);
		}

		function dt_7() {
			loadScript("js/plugin/datatables/DT_bootstrap.js", runDataTables);
		}

	}

	function runDataTables() {

		/*
		 * BASIC
		 */
		var oTable = $('#dt_basic').dataTable({
			//"sDom" : "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-4'i><'col-sm-8 text-right'p>>",
			//"sDom" : '<"dt-row dt-bottom-row"flipt>',
			"sPaginationType" : "bootstrap_full",
			"bFilter": false,
			"bAutoWidth": false,
			"aaSorting": [[ 6, "desc" ]],
			"aoColumns": [
			null,
			null,
			null,
			{ "bSortable": false ,"sWidth":"120px"},
			null,
			null,
			{ "bSortable": false ,"sWidth":"120px"},
			null,
			null,
			{ "bSortable": false ,"sWidth":"120px"},
			null,
			null,
			{ "bSortable": false ,"sWidth":"120px"}
			],
			//"sScrollX": "110%",
			//"bPaginate": false, //取消翻页显示
			//"bInfo": true,//页脚信息
			//"bScrollAutoCss": true,
			// "sScrollY": "300px",
			// "bScrollInfinite": true,
			//"bScrollCollapse": true,
			// "iScrollLoadGap": 30,
			//"sScrollY": "200px",
			//"bPaginate": false,
			//"bRetrieve": true,
			"oLanguage": {
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "前一页",
			"sNext": "后一页",
			"sLast": "尾页"
			},
			"sZeroRecords": "没有检索到数据",
			"sProcessing": "<img src='./loading.gif' />"
			},
			"fnDrawCallback": function( oSettings ) {
     			$(oSettings.nTable).css('width','100%');
     			$(oSettings.nTable).find("th,td").css('white-space', 'nowrap');
     			$(oSettings.nTable).find('tbody tr.even').css('backgroundColor', '#FFF');
     			$(oSettings.nTable).find(".btn-group").slice(-5).addClass('dropup');
                $(oSettings.nTable).find(".btn-group").slice(0,3).removeClass('dropup');
                $(oSettings.nTable).parent(".dt-wrapper").css({
                    'overflow': 'auto',
                    'min-height': '390px',
                    'background': '#f9f9f9'
                });
                $(oSettings.nTable).find("th label input,td label input").next("span").css('margin-right', '0');
                $(oSettings.nTable).find("tr:last td").css({
                    "border": '1px solid #DDDDDD'
                });  
				
 			}

		});

		/* END BASIC */


	}

		
	$(function() {
	    
		$('#reservationT').daterangepicker({
			singleDatePicker: false,
			timePicker: false, //是否启用时间选择
			timePickerIncrement: 1, //分钟选择的间隔
			format: 'YY-MM-DD', //返回值的格式
			timePicker12Hour: false, //采用24小时计时制
		});	

		$("#e6").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});	

		$("#e7").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: false,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});

		$("#clearMoreRe").click(function(){
			$("#moreResult").hide();
		})							
		
	});
	function selectMoreT(){
		$('#moreTrucks').modal();
	}


</script>
